Repository navigation
Add horizontal table of contents for The Filter in the revamped immersive layout - #16919
Draft
peranosborn wants to merge 2 commits into
Draft
peranosborn wants to merge 2 commits into
peranosborn wants to merge 2 commits into
Conversation
…yout Immersive articles in the revamped layout (StandardLayout) always got the slim nav. Articles tagged with a Filter series tag now get the full height masthead. Adds hasFilterSeriesTag to identify Filter content by its series tags. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
…sive layout
Immersive Filter articles in the revamped layout (StandardLayoutArticleGrid)
now show the table of contents as a sticky, horizontally scrolling nav
instead of the "Jump to" list. ArticleBody takes a tableOfContentsStyle
prop ('default' | 'horizontal'), and section headings get a scroll margin
so they don't land underneath the sticky nav.
Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
🚀 Image pushed to AWS ECRImage digest: 🐛 Run the image locallyThe following can be used to run the image locally: # Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:15089f9e5c601c74d35d933a067eded947e0273f9885873458c4cc39ebe32220"
# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-po-horizontal-table-of-contents"
# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-32278"
# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"
IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/artifacts --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering/dotcom-rendering${IMAGE_IDENTIFIER}"
# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY
# Pull the image
docker pull $IMAGE
# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGEFrom guardian/actions-ecr. |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this change?
Immersive Filter articles in the revamped immersive layout get a horizontal table of contents instead of the vertical "Jump to" list.
HorizontalTableOfContentsisland (new): a sticky bar of links to the article's sections. It scrolls horizontally, with edge fades, and has previous/next buttons from tablet up (swipe below tablet). The section currently in view is marked witharia-current="location".ArticleBody: newtableOfContentsStyleprop ('default' | 'horizontal', default'default').'horizontal'renders the new island and adds ascroll-margin-topto section headings so they don't land under the sticky bar.StandardLayoutArticleGrid: passes'horizontal'for immersive articles with a Filter series tag (hasFilterSeriesTag, added in Add filter check to prevent showing slim nav in immersive format #16875).--list-sticky-nav-*tokens (background, border, text, hover, active). These are pillar-tinted, with neutral fallbacks for Labs and Special Report.Like #16875, this only covers the revamped immersive layout (
StandardLayout, behind thearticles-and-publishing-revamped-immersive-layouttest).ImmersiveLayoutis unchanged, and all other articles keep the existing table of contents.Why?
The Filter's long-form buying guides have a lot of sections. A sticky horizontal nav lets readers see where they are and jump between sections without scrolling back to the top.
How has this change been tested?
HorizontalTableOfContents.Screenshots
🤖 Generated with Claude Code